<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">

    <title>公共片段</title>
</head>

<body>

<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <!--container:容器，包裹的元素会有响应式展现效果-->
    <div class="ui container">
        <!--menu:菜单（UI组件）-->
        <!--stackable:适应手机端响应样式，可堆叠的-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="#" th:href="@{/admin/blog}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'">
                <i class="gem icon"></i>博客
            </a>
            <a href="#" th:href="@{/admin/type}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'">
                <i class="folder open icon"></i>分类
            </a>
            <a href="#" th:href="@{/admin/tag}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'">
                <!-- TODO tag 样式被覆盖，icon绝对大小不一致 -->
                <i class="tags icon"></i>标签
            </a>
            <!--头像昵称及个人信息下拉框-->
            <div class="right menu m-item m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img src="https://picsum.photos/id/1024/100/100" th:src="@{${session.user.avatar}}"
                             alt="avatar" class="ui avatar image">
                        <span th:text="${session.user.nickname}">潇哥哥</span>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--移动端下才展示的展开菜单按钮-->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>


<th:block th:fragment="script">
    <!--引入jquery-->
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <!--引入semantic-ui js-->
    <script src="../../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
    <script>
        // 移动端点击菜单按钮，打开关闭菜单切换
        $('.menu.toggle').on('click', function () {
            // toggleClass : 开关事件 -> 开关样式
            $('.m-item').toggleClass('m-mobile-hide');
        });
        // 下拉选项卡鼠标悬浮弹出
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });
        // 提示信息关闭按钮
        $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade')
        })
    </script>
</th:block>


</body>
</html>